<template>
  <div class="couponsbagadd">
    <div class="outmain ba_f heighthv pad_20 bor_rad5">
      <div class="shuju_title mar_b20">
        <div class="shuju_title_text">
          <span>创建发券宝活动</span>
        </div>
      </div>
      <div class="mar_t20 flex-bet flex-y-top">
        <div class="flex-g-1">
          <el-form ref="form" :model="form" label-width="180px">
            <el-form-item label="活动名称" :required="true" prop="name">
              <el-input v-model="form.name" placeholder="请输入活动名称"></el-input>
            </el-form-item>
            <el-form-item label="活动时间" :required="true">
              <el-date-picker v-model="timeData" type="datetimerange" align="right" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['08:00:00', '23:59:59']"></el-date-picker>
            </el-form-item>
            <!-- <el-form-item label="发券方式" :required="true">
              <el-radio-group v-model="form.memberType">
                <el-radio label="1">直接发券</el-radio>
              </el-radio-group>
            </el-form-item>-->
            <el-form-item label="发放次数" :required="true">
              <div>
                <el-radio v-model="form.numType" label="1" class="rw">一次</el-radio>
                <span>活动期间，符合条件的用户仅一次</span>
              </div>
              <div>
                <el-radio v-model="form.numType" label="2" class="rw">每月发放</el-radio>
                <span>活动期间，在每自然月发奖一次</span>
              </div>
              <div>
                <el-radio v-model="form.numType" label="3" class="rw">每周发放</el-radio>
                <span>活动期间，在每周发奖一次</span>
              </div>
            </el-form-item>
            <el-form-item label="参与对象" :required="true">
              <el-radio-group v-model="form.people">
                <el-radio label="1">所有人均可领取</el-radio>
                <el-radio label="2">新用户</el-radio>
                <el-radio label="3">会员可领</el-radio>
                <el-radio label="5">指定标签用户可领</el-radio>
                <el-radio label="6">指定用户可领</el-radio>
              </el-radio-group>
              <div class="mar_t10" v-show="form.people=='5'">
                <el-select v-model="form.userLabel" clearable multiple filterable allow-create placeholder="请选择标签">
                  <el-option v-for="item in labelOptions" :key="item.id" :label="item.labelName" :value="item.id"></el-option>
                </el-select>
              </div>
              <template v-if="form.people=='6'">
                <el-scrollbar>
                  <div class="recordBox">
                    <el-table :data="form.userArr" stripe style="width: 100%">
                      <el-table-column prop="portrait" label="用户信息" width="300">
                        <template slot-scope="scope">
                          <div class="flex flex-y-top">
                            <div class>
                              <img class="goodlogo bor_rad50" :src="scope.row.portrait" />
                            </div>
                            <div class="mar_l10">
                              <div class="flex">
                                <div class>{{scope.row.userName}}</div>
                                <el-tag size="mini" type="info" class="mar_l5">（ID:{{scope.row.id}}）</el-tag>
                              </div>
                              <p class="fon_12 color_9 mar_t5">来源：微信小程序</p>
                            </div>
                          </div>
                        </template>
                      </el-table-column>
                      <el-table-column prop="userTel" label="手机号"></el-table-column>
                      <el-table-column prop="createdAt" label="注册时间"></el-table-column>
                      <el-table-column label="操作">
                        <template slot-scope="scoped">
                          <div>
                            <el-button type="text" @click="delData(scoped.$index)">删除</el-button>
                          </div>
                        </template>
                      </el-table-column>
                    </el-table>
                  </div>
                </el-scrollbar>
                <div class="addgoods textbutton">
                  <i class="el-icon-plus subjectcolor2"></i>
                  <el-button type="text" class @click="addshop(form.userArr)">选择用户</el-button>
                </div>
              </template>
            </el-form-item>
            <el-form-item label="选择优惠券">
              <el-select v-model="form.coupon" multiple filterable placeholder="请选择优惠券">
                <el-option v-for="item in comgrouping" :key="item.id" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="活动背景">
              <div class="uploadSource bor_de rel flex" v-if="form.bgImg">
                <label class="statusLabel curs" @mouseenter="enter(1)" @mouseleave="leave(1)">
                  <i class="el-icon-check" ref="imgicon1"></i>
                  <i class="el-icon-close" @click="deleteMultiImage(form.bgImg,1)"></i>
                </label>
                <img :src="form.bgImg" @click="test(1)" class="wid" />
              </div>
              <div class="uploadSource flex-center curs" v-else @click="test(1)">
                <i class="el-icon-plus fon_40 color_d9"></i>
              </div>
              <div class="yb_margin">建议尺寸：720*180</div>
            </el-form-item>
          </el-form>
        </div>
        <div class="flex-g-0 pad_lr_20">
          <div class="fon_16">常见问题</div>
          <el-collapse v-model="collapseName" accordion class="mar_tb10" style="width: 260px">
            <el-collapse-item title="什么是发券宝？" name="1">
              <div>精准定向目标客户发送优惠券,提高店铺成交转化。</div>
            </el-collapse-item>
            <el-collapse-item title="为什么要做发券宝？" name="2">
              <div>根据不同规则,筛选不同层次的用户,针对性发放优惠券,从而达到拉新、留存、促活、裂变的目的。</div>
            </el-collapse-item>
            <el-collapse-item title="哪些用户可以领取优惠券？" name="3">
              <div>满足条件规则的用户均可领取，有且只能领取一次。</div>
            </el-collapse-item>
          </el-collapse>
          <div class="fon_16 mar_t20">活动规则</div>
          <div class="color_9 mar_t10 lh30 fon_13">
            <div>1.活动仅限在线支付订单；</div>
            <div>2.活动成本由商家承担，与店铺其他活动默认同享</div>
          </div>
        </div>
      </div>
    </div>
    <div class="mar_t20 ba_f pad_20 t_c">
      <el-button type="primary" @click="submitForm">立即创建</el-button>
    </div>
    <attachment-img ref="img1" type="img" @attachment="imgadd1"></attachment-img>
    <shop-edit ref="shopEdit" @fetchData="shopListData"></shop-edit>
  </div>
</template>
<script>
import { postSaveIssueCoupons, getSaveIssueCoupons, getLabel } from '@/api/plug';
import { getSelectCoupon } from '@/api/user';
import { changeDate } from '@/utils/index';
import attachmentImg from '@/plugins/attachment-img';
import shopEdit from './components/selectshop.vue';

export default {
  created() {
    if (this.$route.query.id) {
      this.id = this.$route.query.id;
      this.edit();
    }
    this.getSelectCoupon();
    this.getLabel();
  },
  components: {
    attachmentImg,
    shopEdit
  },
  data() {
    return {
      form: {
        name: '',
        numType: '1',
        people: '1',
        userLabel: [],
        coupon: [],
        userArr: [],
        bgImg: ''
      },
      comgrouping: [],
      labelOptions: [],
      timeData: [new Date(), new Date().setMonth(new Date().getMonth() + 3)],
      collapseName: ''
    };
  },
  methods: {
    delData(msg) {
      console.log(msg);
      this.form.userArr.splice(msg, 1);
    },
    shopListData(data) {
      this.form.userArr = data ? data : [];
    },
    addshop(row) {
      if (row.length) {
        const id = row.map((item) => item.id);
        this.$refs.shopEdit.showEdit(id);
      } else {
        this.$refs.shopEdit.showEdit();
      }
    },
    async getSelectCoupon() {
      const { data } = await getSelectCoupon();
      this.comgrouping = data ? data : [];
    },
    async getLabel() {
      const { data } = await getLabel();
      this.labelOptions = data ? data : [];
    },
    async edit() {
      const { data } = await getSaveIssueCoupons({ id: this.id });
      this.form2 = this.form;
      this.form = Object.assign(this.form2, data);
      if (data.startTime) {
        this.timeData = [data.startTime, data.endTime];
      }
    },
    enter(i = 0) {
      this.$refs['imgicon' + i].style.display = 'none';
    },
    leave(i = 0) {
      this.$refs['imgicon' + i].style.display = 'inline-block';
    },
    test(i = 0) {
      console.log(this.$refs, i);
      this.$refs['img' + i].dialogVisible = true;
    },
    imgadd1(url) {
      this.form.bgImg = url.str;
    },
    deleteMultiImage(item, index, type) {
      //typem没传是单图multigraph多图；index上传图片组件排序
      Array.prototype.remove = function (val) {
        var index = this.indexOf(val);
        if (index > -1) {
          this.splice(index, 1);
        }
      };
      if (type == 'multigraph') {
        switch (index) {
          case 2:
            this.form2.environment.remove(item);
            break;
        }
      } else {
        switch (index) {
          case 1:
            this.form.bgImg = '';
            break;
        }
      }
    },
    async submitForm() {
      this.$refs['form'].validate(async (valid) => {
        if (valid) {
          if (this.timeData) {
            this.form.startTime = changeDate(this.timeData[0]);
            this.form.endTime = changeDate(this.timeData[1]);
          }
          const { msg } = await postSaveIssueCoupons(this.form);
          this.$baseMessage(msg, 'success');
          this.$router.go(-1);
        } else {
          return false;
        }
      });
    }
  }
};
</script>
<style lang="scss">
.couponsbagadd {
  .rw {
    width: 100px;
  }
}
</style>
